<template>
    <div id="stu-importResult">
        <el-breadcrumb separator="/" class="common-bread">
            <el-breadcrumb-item :to="{ path: '/student' }">学生管理</el-breadcrumb-item>
            <el-breadcrumb-item>导入结果</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="contentBox">
            <div id="sec_1">
                <div>
                    <span>本次导入人数</span>
                    <br>
                    <span class="num">{{importNum}}人</span>
                </div>
                <div>
                    <span>本次未导入人数</span>
                    <br>
                    <span class="num">{{noImportNum}}人</span>
                </div>
            </div>
            <div id="btnBox">
                <el-button class="refresh" type="primary" @click="refresh()">刷新</el-button>
                <el-button class="reImport" type="primary" @click="cancel()">重新导入</el-button>
            </div>
            <div class="result-list">
                <div class="tableTitle">导入错误记录</div>
                <el-table :data="list" border align="center">
                    <el-table-column prop="lineNum" label="行数" width="120">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="errorMessage" label="错误信息">
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10"
                        :current-page="pageNum" :total="totalCount" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                list: [],
                totalCount: 0,
                importNum: "0",
                pageNum: 1,
                pageSize: 10,
                noImportNum: "0",
                percentage: 23,
                importId: this.$util.getUrlParam("importId") * 1 || '',
                physicalId: this.$util.getUrlParam("physicalId") * 1 || ''
            };
        },
        mounted() {
            this.getErrorList();
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            //返回
            cancel() {
                history.back();
            },
            //获取错误信息列表
            getErrorList() {
                let url = "/adminapi/v1/user/student/import/result";
                this.list = [];

                this.$axios.post(url, {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    importId: this.importId
                }).then(response => {
                    if (response.data.error == 10000) {
                        let dataList = response.data.data.list;
                        this.importNum = response.data.data.rightNum;
                        this.noImportNum = response.data.data.wrongNum;
                        this.totalCount = response.data.data.wrongNum;
                        this.list = [];
                        if (dataList) {
                            if (dataList.length > 0) {
                                this.list = dataList;
                            }
                        }
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                })
            },
            //刷新
            refresh() {
                this.getErrorList();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getErrorList();
            }
        }
    };
</script>

<style>
    #stu-importResult .title {
        color: #0398FF;
    }

    #stu-importResult .cancel {
        position: absolute;
        right: 20px;
        background: #333744;
        border-radius: 0;
        color: #fff;
        width: 80px;
        line-height: 36px;
        height: 36px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
        font-size: 14px;
    }

    #stu-importResult #sec_1 {
        width: 70%;
        margin-left: 15%;
        height: 150px;
        text-align: center;
        color: #333333;
        border: solid 1px #b2b2b2;
        margin-top: 85px;
        font-size: 24px;
    }

    #stu-importResult #sec_1>div {
        float: left;
        text-align: center;
        width: 49.5%;
        height: 150px;
        padding-top: 30px;
        box-sizing: border-box;
    }

    #stu-importResult #sec_1>div:first-child {
        width: 50%;
        border-right: solid 1px #b2b2b2;
    }

    #stu-importResult #sec_1 .num {
        color: #0398FF;
        margin-top: 25px;
        display: inline-block;
    }

    #btnBox {
        width: 70%;
        height: 40px;
        position: relative;
        margin: 20px 0 50px 15%;
    }

    #btnBox .reImport {
        position: absolute;
        right: 0px;
    }

    #btnBox .refresh {
        position: absolute;
        right: 110px;
    }

    #btnBox .my-progress {
        margin-bottom: 20px;
    }

    #stu-importResult .result-list {
        width: 70%;
        margin-left: 15%;
    }

    #stu-importResult .tableTitle {
        text-align: center;
        color: #333333;
        font-size: 18px;
        font-family: "Microsoft YaHei";
        margin-bottom: 10px;
    }
</style>